<template>
  <!--收藏-->
  <div class="starBox">
    <div
      class="star"
      v-for="item in myCollect"
      :key="item.pet_id"
      @click="handlePetDetails(item.pet_id)"
    >
      <ListItem :petList="item" />
    </div>
    <!--为空-->
    <Empty class="empty" v-if="myCollect.length <= 0" />
  </div>
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import ListItem from "@/components/ListItem";
import { ref } from "vue";
import { gitMycollect } from "@/api/home";
import Empty from "@/components/Empty";

export default {
  name: "DetailsStar",
  components: { Empty, ListItem },
  setup() {
    const { myCollect, GitMycollect } = handleGitMyrelease();
    GitMycollect();
    //宠物详情跳转
    const router = useRouter();
    const handlePetDetails = (value) => {
      router.push(`/petTable/${value}`);
    };
    return {
      myCollect,
      handlePetDetails,
    };
  },
};
//获取收藏列表
function handleGitMyrelease() {
  const route = useRoute();
  const myCollect = ref([]);
  const GitMycollect = () => {
    gitMycollect(route.params.id).then((res) => {
      // console.log(res);
      if (res.status == 200) {
        myCollect.value = res.data;
      }
    });
  };
  return { myCollect, GitMycollect };
}
</script>

<style scoped lang="less">
.starBox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.star {
  width: 44%;
  height: 12rem;
  margin: 0.3rem;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0px 1px 4px 0px #c98d61;
}
.empty {
  margin: 0;
}
</style>
